import React, { useEffect, useState } from 'react';
import { Input, Button } from 'antd'

var map = null;
export default function Bd() {

    
    const BMapGL = window.BMapGL
    
    const [text, setText] = useState('')


    useEffect(() => {
        const BMapGL = window.BMapGL;

        // 初始化地图
        map = new BMapGL.Map("container");
        var point = new BMapGL.Point(120.264370, 30.305488);
         // 设置地图的中心位置和缩放级别
        map.centerAndZoom(point, 15);


        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl({
            anchor: window.BMAP_ANCHOR_TOP_LEFT,
            offset: new BMapGL.Size(10, 50)
        });  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);

        // 创建一个定位控件
        const location = new BMapGL.LocationControl()
        map.addControl(location)

        // map.removeControl

        // 设置地图类型为地球模式
        map.setMapType(window.BMAP_NORMAL_MAP);


        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(); 


        // 添加点标记
        var point = new BMapGL.Point(120.264370, 30.305488);
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中
        marker.addEventListener("click", function () {
            alert("您点击了标注");
        });

         // 添加线
        // var polyline = new BMapGL.Polyline([
        //     new BMapGL.Point(120.264370, 30.305488),
        //     new BMapGL.Point(120.364370, 30.805488),
        //     new BMapGL.Point(120.664370, 30.305488),
        //     new BMapGL.Point(120.764370, 30.805488),
        //     new BMapGL.Point(121.064370, 30.305488),
        // ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
        // map.addOverlay(polyline);

        // polyline.addEventListener('click', () => {
        //     alert("您点击了线");
        // })


        //设置地图的倾斜角度
        // map.setTilt(73);

         // 创建位置点
        var point = new BMapGL.Point(120.564370, 30.305488);
        // 创建带高度的点
        var marker3d = new BMapGL.Marker3D(point, 8000, {
            size: 50,
            shape: window.BMAP_SHAPE_CIRCLE,
            fillColor: '#f66',
            fillOpacity: 0.6
        });
        // 将点添加到地图上
        map.addOverlay(marker3d);


    }, []);

    function searchClick(){
        console.log(text);
        
        // 设置搜索的中心位置
        // 百度地图API功能      
        map.centerAndZoom(new BMapGL.Point(120.264370, 30.305488), 11);

        var options = {
            onSearchComplete: function(results){
                // 判断状态是否正确
                if (local.getStatus() == window.BMAP_STATUS_SUCCESS){
                    var s = [];
                    for (var i = 0; i < results.getCurrentNumPois(); i ++){
                        s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                    }
                    document.getElementById("r-result").innerHTML = s.join("<br/>");
                }
            }
        };

        var local = new BMapGL.LocalSearch(map, options);

        local.search(text);
    }

    return (
        <div>
            <div style={{ marginBottom: '10px' }}>
                <Input
                    type="text"
                    placeholder="请输入关键字搜索地点"
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    style={{ width: '300px', padding: '5px' }}
                />
                <Button onClick={searchClick}>搜索</Button>
            </div>

            <div id="container" style={{ width: '100%', height: 450 }}></div>
            <div id="r-result"></div>
        </div>
    );
}
